<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
    <script type="text/javascript">
    /**
     * 
     * DOM:doucument object model
     * js通过DOM对 HTML文档机械能操作，只要理解了DOM就可以操作web界面
     * 文档：
     *      文档表示的就是整个的HTML网页文档
     * 对象：
     *      对象表示将网页的每一个部分都转换为了一个对象
     * 模型：
     *      使用模型来表示对象之间的关系（html->body->a...），方便我们获取对象
     * 
     * 文档节点：整个HTML文档
     * 元素节点：HTML文档中HTML标签，比如p
     * 属性节点：属性名，id。。。
     * 文本节点：：text
     */ 
			
			/*
			 * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			console.log(document);
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";
			
			
		</script>
	</body>
</html>
